<template>
  <CommonDialog
    v-model="visible"
    :loading="loading"
    :title="`${dictionaryId ? '编辑' : '创建'}模型`"
    :width="640"
    @submit="submit"
    @cancel="cancel"
  >
    <Form ref="formEl" :model="formData" :rules="rules" :label-width="140">
      <!-- <FormItem label="Icon" prop="name">
        <Upload
          ref="upload"
          :show-upload-list="false"
          :default-file-list="defaultList"
          accept=".jpg,.jpeg,.png"
          :max-size="2048"
          :before-upload="handleBeforeUpload"
          type="drag"
        >
          <div class="upload-box">
            <img v-if="formData.img" :src="formData.img" alt="">

            <Icon v-else type="ios-camera" size="20"></Icon>
          </div>
        </Upload>
      </FormItem> -->

      <FormItem label="名称" prop="name">
        <Input v-model="formData.name" placeholder="请输入名称" />
      </FormItem>

      <FormItem label="品牌" prop="modeltype">
        <Select v-model="formData.modeltype" transfer placeholder="请选择品牌">
          <Option v-for="item in modelGather" :value="item.id" :key="item.id">
            <img v-if="/^https/.test(item.icon)" :src="item.icon" alt="" class="menu-item-icon" />
            <div v-else v-html="item.icon" class="menu-item-icon"></div>
            <span class="menu-item-title">{{ item.name }}</span>
          </Option>
        </Select>
      </FormItem>

      <FormItem label="请求地址" prop="modelpath">
        <Input
          v-model="formData.modelpath"
          type="textarea"
          :rows="3"
          placeholder="请输入请求地址"
        />
      </FormItem>

      <FormItem label="模型名称" prop="modelname">
        <Input v-model="formData.modelname" placeholder="请输入模型名称" />
      </FormItem>

      <FormItem label="API Key" prop="appkey">
        <Input v-model="formData.appkey" placeholder="请输入API Key" />
      </FormItem>

      <FormItem label="App Secret" prop="appsecret">
        <Input v-model="formData.appsecret" placeholder="请输入App Secret" />
      </FormItem>

      <!-- <FormItem label="图标类型">
        <Select v-model="formData.ctype" transfer placeholder="请选择图标类型" filterable clearable>
          <Option v-for="item in ICON_TYPE_OPTIONS" :value="item.value" :key="item.value">
            {{item.label}}
          </Option>
        </Select>
      </FormItem> -->

      <!-- <FormItem label="排序位置" prop="sortindex">
        <InputNumber :min="1" :max="200" v-model="formData.sortindex" />
      </FormItem> -->

      <FormItem label="其他配置" prop="parameters">
        <Input
          v-model="formData.parameters"
          type="textarea"
          :rows="3"
          placeholder="此项已property形式进行配置,例如: appId=123456"
        />
      </FormItem>

      <FormItem label="描述" prop="description">
        <Input v-model="formData.description" type="textarea" :rows="4" maxlength="100" show-word-limit placeholder="请输入描述" />
      </FormItem>

      <FormItem label="对话模型">
        <Switch v-model="formData.dialoguemodel" />
      </FormItem>

      <FormItem label="方法调用">
        <Switch v-model="formData.methodinvocation" />
      </FormItem>

      <FormItem label="向量化">
        <Switch v-model="formData.vectorization" />
      </FormItem>

      <FormItem label="重排">
        <Switch v-model="formData.rearrangement" />
      </FormItem>

      <FormItem label="文生图">
        <Switch v-model="formData.texttoimage" />
      </FormItem>

      <FormItem label="图生图">
        <Switch v-model="formData.imagetoimage" />
      </FormItem>

      <FormItem label="文生音频">
        <Switch v-model="formData.texttoaudio" />
      </FormItem>

      <FormItem label="音频转音频">
        <Switch v-model="formData.audiotoaudio" />
      </FormItem>

      <FormItem label="文生视频">
        <Switch v-model="formData.texttovideo" />
      </FormItem>

      <FormItem label="图片转视频">
        <Switch v-model="formData.imagetovideo" />
      </FormItem>
    </Form>
  </CommonDialog>
</template>

<script setup>
import { ref } from 'vue'
import { Message } from 'view-ui-plus'

import { aimodelAdd, aimodelEdit, aimodelDetail } from '@/api/modules/modelMent'
import modelGather from '../TypeMenu/ai-config'

const emit = defineEmits(['cancel', 'submit'])

// 是否打开弹窗
const visible = ref(true)

// 加载状态
const loading = ref(false)

// 元数据ID
const modelId = ref(undefined)
// 表单元素ref
const formEl = ref(null)
// 表单数据
const formData = ref({
  name: '', //名称
  description: '', //描述
  modeltype: '',
  modelname: '',
  appkey: '',
  appsecret: '',
  modelpath: '', //请求地址
  parameters: '', //其他配置
  dialoguemodel: false, //对话模型
  methodinvocation: false, //方法调用
  vectorization: false, //向量化
  rearrangement: false, //重排
  texttoimage: false,
  imagetoimage: false,
  texttoaudio: false,
  audiotoaudio: false,
  texttovideo: false,
  imagetovideo: false
})

// 表单校验条件
const rules = ref({
  name: [{ required: true, message: '请填写名称', trigger: 'blur' }],
  modeltype: [{ required: true, message: '请选择品牌', trigger: 'blur' }],
  appkey: [{ required: true, message: '请填写appkey', trigger: 'blur' }],
  appsecret: [{ required: true, message: '请填写appsecret', trigger: 'blur' }]
})

const handleBeforeUpload = (file) => {
  console.log(file)
  formData.value.img = URL.createObjectURL(file)
  console.log(formData.value.img)
  return false
}

/**
 * 提交表单
 */
const submit = async () => {
  let valid = await formEl.value.validate()
  if (!valid) return

  loading.value = true

  try {
    const params = {
      ...formData.value,
      id: modelId.value
    }

    await (modelId.value ? aimodelEdit : aimodelAdd)({
      data: params
    })

    Message.success('操作成功')
    emit('submit')
  } catch (error) {
    console.error(error)
  }

  loading.value = false
}

/**
 * 取消表单
 */
const cancel = () => {
  visible.value = false
  emit('cancel')
}

const getDetailData = () => {
  loading.value = true

  aimodelDetail({
    data: {
      id: modelId.value
    }
  })
    .then(({ data }) => {
      for (const key in formData.value) {
        formData.value[key] = data[key]
      }
    })
    .finally(() => {
      loading.value = false
    })
}

/**
 * 初始化对话框
 */
const initDialog = (id) => {
  // 显示对话框
  visible.value = true

  modelId.value = id

  if (id) {
    getDetailData()
  }
}

defineExpose({
  initDialog
})
</script>

<style scoped lang="scss">
.ivu-form {
  height: 600px;
  overflow-y: auto;
}
.flex-form {
  display: flex;
}
.ivu-input-wrapper,
.ivu-select {
  width: 360px;
}
::deep(.ivu-form-item-label) {
  text-align: right;
}

.ivu-upload {
  display: inline-block;
  .upload-box {
    width: 156px;
    height: 156px;
    line-height: 156px;
  }
}
.ivu-select-item {
  display: flex;
  align-items: center;
  .menu-item-title {
    font-size: 16px;
    margin-left: 10px;
  }
  .menu-item-icon {
    width: 20px;
    height: 20px;
  }
}
</style>
